/* 三栏网格布局系统 - 18%导航区+80%内容区+自动侧边栏
 Three-column grid layout system */
.container {
    display: grid;
    grid-template-columns: 18% 80%; /* 列宽分配：左侧导航18% | 主要内容80% */
    grid-template-areas: "outline content "; 
    gap: 2%; /* 列间距 */
    height: 100vh; /* 满屏高度 */
}

.left-panel {
    grid-area: left-panel;
}

.content {
    overflow-y: auto;
    padding: 20px;
    line-height: 1.6;
    background: #f9f9f9; /* 浅灰色背景 */
    margin-left:10px
}

.outline {
    grid-area: outline;
    overflow-y: auto;
    padding: 5px;
    position: sticky;
    height: 100vh; /* 满屏高度 */;
    background: white;
    color: #000 !important;
}

.outline a {
    color: #000 !important;
    text-decoration: none !important;
}

/* 滚动条交互设计 - 宽度10px+悬停显色
 Scrollbar design with hover effects */
::-webkit-scrollbar {
    width: 10px; /* 滚动条宽度 */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
    background: #888; /* 滑块默认颜色 */
    border-radius: 3px; /* 圆角半径 */
    transition: background 0.3s; /* 颜色过渡动画 */
}

::-webkit-scrollbar-thumb:hover {
    background: #666; /* 悬停加深颜色 */
}


/* 代码块样式系统 - 带行号显示
 Code block styling with line numbers */
pre {
    position: relative;
    background: #f5f5f5;
    padding: 1rem 1rem 1rem 4rem;
    border-radius: 4px;
    margin: 1rem 0;
    counter-reset: line;
}

pre .line {
    display: block;
    counter-increment: line;
    position: relative;
    padding-left: 2.5em;
}

pre .line::before {
    content: counter(line);
    position: absolute;
    left: -3.5em;
    width: 3em;
    text-align: right;
    color: #666;
    border-right: 1px solid #ddd;
    padding-right: 0.5em;
}

/* 复制按钮交互设计 - 半透明背景+悬停反馈
 Copy button interaction - Translucent background & hover feedback */
.copy-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    background: rgba(0,0,0,0.1); /* 半透明黑色背景 */
    border: none;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 3px;
    transition: all 0.2s; /* 平滑过渡效果 */
}

.copy-btn:hover {
    background: rgba(0,0,0,0.2);
}

/* 淡出动画曲线 - 保留90%时间可见
 Fade-out animation - Maintain visibility for 90% duration */
@keyframes fadeOut {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

.copy-btn {
    animation-duration: 5s;
}